<template>
    <section class="wrap">
        <header class="wrap-header">
            <div class="wrap-logo">
                <img src="static/subLogo.png" alt="subLogo">
            </div>
            <h3 class="wrap-title">{{title}}</h3>
            <div v-if="$slots.right" class="wrap-right">
                <slot name="right"></slot>
            </div>
        </header>
        <slot></slot>
    </section>
</template>
<script>
export default {
    name: 'wrap',
    props: {
        title: String
    }
}
</script>
<style lang='less'>
@import '../../less/variables.less';
@import '../../less/mixins.less';

.wrap {
    flex: 1;
    border: 1px solid @border-color;
    display: flex;
    flex-direction: column;

    &-header {
        height: 60px;
        display: flex;
        align-items: center;
        position: relative;
        background-color: #fff;
        border-bottom: 1px solid @border-color;
    }

    &-logo,
    &-right {
        position: absolute;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    &-logo {
        left: 25px;

        img {
            height: 40px;
        }
    }

    &-title {
        flex: 1;
        text-align: center;
    }

    &-right {
        right: 25px;
    }
}

</style>
